<template>
  <div class="approve-form">
    <p class="approve-form-title">审批记录</p>
    <div class="block">
      <el-timeline>
        <el-timeline-item v-for="item in approve.list" placement="top">
          <el-card>
            <el-col class="avatar-approve" :span="3">
              <el-avatar
                v-if="item.name.includes('|')"
                shape="circle"
                :size="40"
                fit="cover"
                :style="'color:#fff;background:#3B7CFF'"
                :src="imgs.img5"
              />
              <el-avatar
                v-if="!item.name.includes('|')"
                class="user-avatar"
                shape="circle"
                :size="40"
                fit="cover"
                :style="'color:#fff;background:#3B7CFF'"
              >
                {{
                  item.name.length > 2
                    ? item.name.slice(item.name.length - 2)
                    : item.name
                }}
              </el-avatar>
            </el-col>
            <el-col :span="16" class="approve-content">
              <span>审批人:{{ item.name }}</span>

              <p v-if="item.positionsName">职位：{{ item.positionsName }}</p>
              <p v-if="item.auditTime && item.executed">
                审批时间：{{ item.auditTime }}
              </p>
              <br />
              <el-button
                v-if="
                  ((item.executed && !item.auditTime) ||
                    (!item.approved && item.executed && !item.auditTime)) &&
                  item.userName.indexOf(user.userId) != -1
                "
                @click="() => aggre()"
                >同意</el-button
              >
              <el-button
                v-if="
                  ((item.executed && !item.auditTime) ||
                    (!item.approved && item.executed && !item.auditTime)) &&
                  item.userName.indexOf(user.userId) != -1
                "
                @click="() => handleApprove(300)"
                >拒绝</el-button
              >
              <!--审批通过 -->
              <p v-if="item.approved && item.auditTime && item.executed">
                <!-- 通过原因：{{ item.comments }} -->
              </p>
              <!--审批拒绝 -->
              <p v-if="!item.approved && item.auditTime && item.executed">
                拒绝原因：{{ item.comments }}
              </p>
            </el-col>
            <!--审批通过 -->
            <el-col
              v-if="item.approved && item.auditTime && item.executed"
              :span="5"
              ><img :src="imgs.img3"
            /></el-col>
            <!--审批拒绝 -->
            <el-col
              v-if="item.executed && item.auditTime && !item.approved"
              :span="5"
              ><img :src="imgs.img4"
            /></el-col>
            <!--待审批-->
            <el-col
              v-if="
                (item.executed &&
                  !item.auditTime &&
                  item.userName.indexOf(user.userId) == -1) ||
                !item.executed
              "
              :span="5"
              ><img :src="imgs.img1"
            /></el-col>
            <!--待我审批-->
            <el-col
              v-if="
                item.executed &&
                !item.auditTime &&
                item.userName.indexOf(user.userId) != -1
              "
              :span="5"
              ><img :src="imgs.img2"
            /></el-col>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          v-model="textarea"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          :placeholder="state == 300 ? '请输入拒绝原因' : '请输入同意原因'"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitApprove">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import img1 from "./1.png";
import img2 from "./2.png";
import img3 from "./3.png";
import img4 from "./4.png";
import img5 from "./person.png";
import { mapState, mapMutations } from "vuex";
export default {
  props: ["dataKey", "typeId"], // dataKey为单据状态，typeId为单据类型从而分发请求
  data() {
    return {
      data: "",
      state: "",
      imgs: {
        img1: img1,
        img2: img2,
        img3: img3,
        img4: img4,
        img5: img5,
      },
      dialogVisible: false,
      textarea: "",
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    ...mapState(["approve", "user"]),
  },
  methods: {
    getList() {
      const { fullPath } = this.$route;
      const billId = localStorage.getItem(fullPath);
      this.$store.dispatch("approve/setApproveList", billId);
    },
    handleClose(done) {
      this.dialogVisible = false;
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    handleApprove(state) {
      this.state = state;
      this.dialogVisible = true;
    },
    aggre() {
      this.state = 400;
      this.submitApprove();
    },
    async submitApprove() {
      const { fullPath } = this.$route;
      const billId = localStorage.getItem(fullPath);
      await this.$store.dispatch("approve/submitApproveInfo", {
        id: billId,
        approveStatus: this.state,
        remark: this.textarea,
        typeId: this.typeId,
      });
      // 保存成功后重新拉去新数据
      this.getList();
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss">
.approve-form {
  background: #fff;
  .el-avatar {
    background: #fff;
  }
  .approve-form-title {
    margin-top: 0px;
    padding: 20px;
  }
  .avatar-approve {
    padding-left: 0px !important;
  }
  p {
    border-bottom: 0px;
  }
  .el-timeline {
    margin: 10px 0;
  }
  .el-timeline-item__wrapper {
    top: -30px;
    padding: 10px 20px;
  }
  .el-step.is-vertical .el-step__line {
    top: 5px;
  }
  ul {
    padding-inline-start: 10px;
  }
  .approve-content {
    padding: 5px;
  }
}
</style>
